<template>
	<view class="container">
		<tui-grid>
			<block v-for="(item,index) in iconList" :key="index">
				<tui-grid-item @click="show(item.name)">
					<view class="tui-grid-icon">
						<tui-icon :name="item.name" :size="item.size" :color="item.color || '#999'"></tui-icon>
					</view>
					<text class="tui-grid-label">{{item.name}}</text>
				</tui-grid-item>
			</block>
		</tui-grid>
	</view>
</template>

<script>
	import thorui from '@/components/common/tui-clipboard/tui-clipboard.js'
	export default {
		data() {
			return {
				iconList: [{
					name: "about",
					size: 30
				}, {
					name: "about-fill",
					size: 30
				}, {
					name: "add",
					size: 30
				}, {
					name: "add-fill",
					size: 30,
					color: "#19be6b"
				}, {
					name: "addmessage",
					size: 28,
					color: "#19be6b"
				}, {
					name: "addressbook",
					size: 28,
					color: "#19be6b"
				}, {
					name: "agree",
					size: 28
				}, {
					name: "agree-fill",
					size: 28
				}, {
					name: "alarm",
					size: 32
				}, {
					name: "alarm-fill",
					size: 32
				}, {
					name: "alipay",
					size: 28
				}, {
					name: "android",
					size: 30
				}, {
					name: "applets",
					size: 28
				}, {
					name: "arrowdown",
					size: 30
				}, {
					name: "arrowleft",
					size: 30
				}, {
					name: "arrowright",
					size: 30
				}, {
					name: "arrowup",
					size: 30
				}, {
					name: "attestation",
					size: 28
				}, {
					name: "back",
					size: 30
				}, {
					name: "bag",
					size: 32
				}, {
					name: "bag-fill",
					size: 32
				}, {
					name: "balloon",
					size: 30
				}, {
					name: "bankcard",
					size: 30
				}, {
					name: "bankcard-fill",
					size: 30
				}, {
					name: "bottom",
					size: 30
				}, {
					name: "calendar",
					size: 28
				}, {
					name: "camera",
					size: 30
				}, {
					name: "camera-fill",
					size: 30
				}, {
					name: "camera-add",
					size: 30
				}, {
					name: "card",
					size: 30
				}, {
					name: "card-fill",
					size: 30
				}, {
					name: "cart",
					size: 30
				}, {
					name: "cart-fill",
					size: 30
				}, {
					name: "category",
					size: 30
				}, {
					name: "category-fill",
					size: 30
				}, {
					name: "check",
					size: 30
				}, {
					name: "circle",
					size: 30
				}, {
					name: "circle-fill",
					size: 30
				}, {
					name: "circle-selected",
					size: 30
				}, {
					name: "clock",
					size: 30
				}, {
					name: "clock-fill",
					size: 30
				}, {
					name: "close",
					size: 30
				}, {
					name: "close-fill",
					size: 30
				}, {
					name: "community",
					size: 30
				}, {
					name: "community-fill",
					size: 30
				}, {
					name: "computer",
					size: 34
				}, {
					name: "computer-fill",
					size: 34
				}, {
					name: "coupon",
					size: 30
				}, {
					name: "delete",
					size: 26
				}, {
					name: "deletekey",
					size: 30
				}, {
					name: "dingtalk",
					size: 30
				}, {
					name: "dissatisfied",
					size: 30
				}, {
					name: "down",
					size: 30
				}, {
					name: "download",
					size: 28
				}, {
					name: "edit",
					size: 32
				}, {
					name: "ellipsis",
					size: 25
				}, {
					name: "enlarge",
					size: 28
				}, {
					name: "evaluate",
					size: 28
				}, {
					name: "exchange",
					size: 28
				}, {
					name: "explain",
					size: 28
				}, {
					name: "explain-fill",
					size: 30
				}, {
					name: "explore",
					size: 30
				}, {
					name: "explore-fill",
					size: 30
				}, {
					name: "eye",
					size: 30
				}, {
					name: "feedback",
					size: 28
				}, {
					name: "fingerprint",
					size: 28
				}, {
					name: "friendadd",
					size: 30
				}, {
					name: "friendadd-fill",
					size: 30
				}, {
					name: "gps",
					size: 30
				}, {
					name: "histogram",
					size: 28
				}, {
					name: "home",
					size: 28
				}, {
					name: "home-fill",
					size: 28
				}, {
					name: "house",
					size:28
				}, {
					name: "imface",
					size: 28
				}, {
					name: "imkeyboard",
					size: 28
				}, {
					name: "immore",
					size: 28
				}, {
					name: "imvoice",
					size: 28
				}, {
					name: "ios",
					size: 30
				}, {
					name: "kefu",
					size: 30
				}, {
					name: "label",
					size: 32
				}, {
					name: "label-fill",
					size: 32
				}, {
					name: "like",
					size: 30
				}, {
					name: "like-fill",
					size: 30
				}, {
					name: "link",
					size: 30
				}, {
					name: "listview",
					size: 28
				}, {
					name: "loading",
					size: 30
				}, {
					name: "location",
					size: 30
				}, {
					name: "mail",
					size: 32
				}, {
					name: "mail-fill",
					size: 32
				}, {
					name: "manage",
					size: 32
				}, {
					name: "manage-fill",
					size: 32
				}, {
					name: "member",
					size: 32
				}, {
					name: "member-fill",
					size: 32
				}, {
					name: "message",
					size: 32
				}, {
					name: "message-fill",
					size: 32
				}, {
					name: "mobile",
					size: 30
				}, {
					name: "moments",
					size: 28
				}, {
					name: "more",
					size: 30
				}, {
					name: "more-fill",
					size: 30
				}, {
					name: "narrow",
					size: 30
				}, {
					name: "news",
					size: 34
				}, {
					name: "news-fill",
					size: 34
				}, {
					name: "nodata",
					size: 30
				}, {
					name: "notice",
					size: 28
				}, {
					name: "notice-fill",
					size: 28
				}, {
					name: "offline",
					size: 32
				}, {
					name: "offline-fill",
					size: 32
				}, {
					name: "oppose",
					size: 30
				}, {
					name: "oppose-fill",
					size: 30
				}, {
					name: "order",
					size: 30
				}, {
					name: "partake",
					size: 30
				}, {
					name: "people",
					size: 30
				}, {
					name: "people-fill",
					size: 30
				}, {
					name: "pic",
					size: 30
				}, {
					name: "pic-fill",
					size: 30
				}, {
					name: "picture",
					size: 28
				}, {
					name: "pie",
					size: 30
				}, {
					name: "play",
					size: 30
				}, {
					name: "suspend",
					size: 30
				}, {
					name: "plus",
					size: 30
				}, {
					name: "reduce",
					size: 30
				}, {
					name: "polygonal",
					size: 30
				}, {
					name: "position",
					size: 30
				}, {
					name: "pwd",
					size: 30
				}, {
					name: "qq",
					size: 30
				}, {
					name: "qrcode",
					size: 30
				}, {
					name: "redpacket",
					size: 32
				}, {
					name: "redpacket-fill",
					size: 32
				}, {
					name: "refresh",
					size: 30
				}, {
					name: "revoke",
					size: 30
				}, {
					name: "satisfied",
					size: 30
				}, {
					name: "screen",
					size: 30
				}, {
					name: "search",
					size: 30
				}, {
					name: "search-2",
					size: 30
				}, {
					name: "send",
					size: 30
				}, {
					name: "service",
					size: 30
				}, {
					name: "service-fill",
					size: 30
				}, {
					name: "setup",
					size: 30
				}, {
					name: "setup-fill",
					size: 30
				}, {
					name: "share",
					size: 30
				}, {
					name: "share-fill",
					size: 30
				}, {
					name: "shield",
					size: 30
				}, {
					name: "shop",
					size: 30
				}, {
					name: "shop-fill",
					size: 30
				}, {
					name: "shut",
					size: 30
				}, {
					name: "signin",
					size: 30
				}, {
					name: "sina",
					size: 30
				}, {
					name: "skin",
					size: 30
				}, {
					name: "soso",
					size: 30
				}, {
					name: "square",
					size: 30
				}, {
					name: "square-fill",
					size: 30
				}, {
					name: "square-selected",
					size: 30
				}, {
					name: "star",
					size: 30
				}, {
					name: "star-fill",
					size: 30
				}, {
					name: "strategy",
					size: 30
				}, {
					name: "sweep",
					size: 30
				}, {
					name: "time",
					size: 30
				}, {
					name: "time-fill",
					size: 30
				}, {
					name: "todown",
					size: 30
				}, {
					name: "toleft",
					size: 30
				}, {
					name: "tool",
					size: 30
				}, {
					name: "top",
					size: 30
				}, {
					name: "toright",
					size: 30
				}, {
					name: "towardsleft",
					size: 30
				}, {
					name: "towardsright",
					size: 30
				}, {
					name: "towardsright-fill",
					size: 30
				}, {
					name: "transport",
					size: 30
				}, {
					name: "transport-fill",
					size: 30
				}, {
					name: "turningdown",
					size: 30
				}, {
					name: "turningleft",
					size: 30
				}, {
					name: "turningright",
					size: 30
				}, {
					name: "turningup",
					size: 30
				}, {
					name: "unreceive",
					size: 30
				}, {
					name: "seen",
					size: 30
				}, {
					name: "unseen",
					size: 30
				}, {
					name: "up",
					size: 30
				}, {
					name: "upload",
					size: 30
				}, {
					name: "video",
					size: 30
				}, {
					name: "voice",
					size: 32
				}, {
					name: "voice-fill",
					size: 32
				}, {
					name: "voipphone",
					size: 28
				}, {
					name: "wallet",
					size: 30
				}, {
					name: "warning",
					size: 30
				}, {
					name: "wealth",
					size: 30
				}, {
					name: "wealth-fill",
					size: 30
				}, {
					name: "weather",
					size: 30
				}, {
					name: "wechat",
					size: 30
				}, {
					name: "wifi",
					size: 30
				}]
			}
		},
		methods:{
			show(name){
				thorui.getClipboardData(name, res => {
					// #ifdef H5 || MP-ALIPAY
					if (res) {
						this.tui.toast(`复制成功：${name}`);
					}
					// #endif
				});
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-grid-icon {
		width: 64rpx;
		height: 64rpx;
		margin: 0 auto;
		text-align: center;
		vertical-align: middle;
	}

	.tui-grid-icon+.tui-grid-label {
		margin-top: 10rpx;
	}

	.tui-grid-label {
		display: block;
		text-align: center;
		font-weight: 400;
		color: #333;
		font-size: 30rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
